import React, { Fragment, useCallback, useMemo, useState } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { Layout, Menu, Breadcrumb } from 'antd';
import { TeamOutlined, UserOutlined,} from '@ant-design/icons';

function CommonRea({ history, location, children, menu, userInfo }) {
    console.log(children);
    const [collapsed, setCollapsed] = useState(false)
    const { Header, Content, Sider } = Layout;
    const { SubMenu } = Menu;
    const isLogin=useMemo(function(){
        return location.pathname === '/login'
    },[location.pathname])
    const onCollapse=useCallback(collapsed => {
        console.log(collapsed);
        setCollapsed(!collapsed);
      },[collapsed])
  return (
    <div>
        {
            isLogin
            ?
            children
            :
            <Fragment>
                <aside>
                    <Layout style={{ minHeight: '100vh' }}>
                        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}  theme='dark'>
                            <div className="logo" />
                            <Menu theme="dark" mode="inline">
                                <SubMenu key="sub1" icon={<UserOutlined />} title="User">
                                <Menu.Item key="3">Tom</Menu.Item>
                                <Menu.Item key="4">Bill</Menu.Item>
                                <Menu.Item key="5">Alex</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
                                <Menu.Item key="6">Team 1</Menu.Item>
                                <Menu.Item key="8">Team 2</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout className="site-layout">
                            <Header className="site-layout-background" style={{ padding: 0 }} theme='dark'>当前页面：首页</Header>
                            <Content style={{ margin: '0 16px' }}>
                                <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>User</Breadcrumb.Item>
                                <Breadcrumb.Item>Bill</Breadcrumb.Item>
                                </Breadcrumb>
                                <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                                {
                                    children
                                }
                                </div>
                            </Content>
                        </Layout>
                    </Layout>

                </aside>
                

            </Fragment>
        }
    </div>
  )
}
// export default connect(function(state) {
//     return {
//         menu: state.menu.menuList,
//         userInfo: state.common.userInfo
//     }
// })( withRouter ( CommonRea ))
export default withRouter(CommonRea)